<template>

  <div id="myChartBar2" :style="{width: '600px', height: '400px'}"></div>

</template>

<script>
  export default {
    name: "ChartsBarView",
    mounted(){
      this.init();
    },
    created(){

    },
    data(){
      return{
        name:[],
        val:[],
      }
    },
    props: {
      dataList: {
        type: [Array],
      },
    },
    methods: {
      dest(){
        this.$destroy(true);
        console.log(1)
      },
      init(){
        /*循环取值*/
        this.name = [];
        this.val = [];
        for(var i =0;i<this.dataList.length; i++){
          this.name.push(this.dataList[i].name)
          this.val.push(this.dataList[i].value)
        }
        this.drawLine();
      },

      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChartBar2 = this.$echarts.init(document.getElementById('myChartBar2'))
        // 绘制图表
        myChartBar2.setOption({

          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              //dataView : {show: true, readOnly: false},
              //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              //restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'value'
            }
          ],
          yAxis : [
            {
              type : 'category',
              data : this.name
            }
          ],
          textStyle:{
            color:"#FFF",
          },
          series : [
            {
              name:'告警视频源TOP5',
              type:'bar',
              stack: '次数',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:this.val
            },

          ],
          color: {
            type: 'line',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0, color: 'transparent' // 0% 处的颜色
              },
              {
                offset: 0.3, color: '#265080' // 50% 处的颜色
              },
              {
                offset: 0.7, color: '#4ca0ff' // 70% 处的颜色
              },
              {
                offset: 1, color: '#448CDF' // 100% 处的颜色
              },
            ],
            globalCoord: false // 缺省为 false
          }
        });
      }
    }
  }
</script>



<style scoped>
#myChartBar{
  padding-top: 40px;
}
</style>